<template>
    <view class="page">
        <!-- 图片显示区 -->
        <view class="image-wrap">
            <image :src="imageUrl || '/static/default.png'" mode="aspectFill" class="display-image"
                @click="chooseImage"></image> 
        </view>
        <!-- 功能按钮 -->
        <view class="btn-group">
            <button class="func-btn" @click="chooseImage" style="background-color: darkgray;"><text>选择图片显示</text></button>
            <button class="func-btn" @click="previewImage" :disabled="!imageUrl" style="background-color: darkgray;"><text>预览图片</text></button>
            <button class="func-btn" @click="getImageInfo" style="background-color: darkgray;"><text>获取图片信息</text></button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imageUrl: "/static/logo.png", // 存储选中的图片路径
                imageInfo: null, // 存储图片信息
                orientationText: {
                    'up': '正常',
                    'down': '旋转180°',
                    'left': '左旋90°',
                    'right': '右旋90°',
                    'up-mirrored': '水平翻转',
                    'down-mirrored': '垂直翻转'
                }
            }
        },
        methods: {
            // 选择图片
            chooseImage() { // 注意：方法名拼写，原代码中是updataImage（少了个't'）
                uni.chooseImage({
                    count: 1,
                    sourceType: ['album'],
                    success: (res) => {
                        this.imageUrl = res.tempFilePaths[0];
                    }, // 更新图片路径
                    fail: (err) => {
                        console.error("选择图片失败:", err); // 选择新图片时清空旧信息
                    }
                });
            },
            // 预览图片
            previewImage() {
                uni.previewImage({
                    urls: [this.imageUrl],
                    current: this.imageUrl
                });
            },
            // 获取图片信息
            getImageInfo() {
                if (!this.imageUrl) return;
                uni.getImageInfo({
                    src: this.imageUrl,
                    success: res => {
                        // 手动获取图片格式（适用于本地路径）
                        const extension = this.imageUrl.split('.').pop().toLowerCase();
                        const typeMap = {
                            jpg: 'jpeg',
                            jpeg: 'jpeg',
                            png: 'png',
                            gif: 'gif',
                            webp: 'webp'
                        };
                        this.imageInfo = {
                            width: res.width,
                            height: res.height,
                            type: typeMap[extension] || 'unknown', // 手动映射类型
                            path: res.path,
                            orientation: res.orientation || 'up'
                        };
                        console.log("=== 图片信息 ===", this.imageInfo);
                        console.log("宽度:", res.width);
                        console.log("高度:", res.height);
                        console.log("类型:", this.imageInfo.type); // 使用手动获取的类型
                        console.log("路径:", res.path);
                        console.log("方向:", res.orientation || '正常');
                        console.log("=================");
                    },
                    fail: err => {
                        console.error("获取图片信息失败：", err);
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .page {
        min-height: 100vh;    
    }
    .image-wrap {
        display: flex;
        justify-content: center;
        padding: 40px 20px;
    }

    .display-image {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0 20px 30px;
    }
    .btn-group text{
        color:black;
    }

    .func-btn {
        height: 44px;
        width: 325px;
        border-radius: 3px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>